<!--
 * @Author yuec621@outLook.com
 * @Description: 柱状图页面曲线图表组件
 * @Date: 2024-11-04 13:34:02
 * @LastEditTime: 2024-11-14 13:58:35
 * @LastEditors: Please set LastEditors
 * @Reference: 
-->
<template>
    <!-- 横向状态图和横向折线图及自定义y轴label -->
    <div id="comChart" style="width: 100%;height: 500px;">
    </div>
</template>
<script setup>
    import {
        computed,
        nextTick,
        reactive,
        watchEffect
    } from 'vue';
    import * as echarts from 'echarts'
    import dayjs from 'dayjs'
    import useUserStore from "@/store/modules/user";
    const {
        proxy
    } = getCurrentInstance();
    const userStore = useUserStore();
    const props = defineProps({
        chartList: {
            type: Object,
            default: () => {
                return {}
            }
        },
        attrObj: {
            type: Object,
            default: () => {
                return undefined
            }
        },
    })
    let comChart

    function setC1(arr) {
        let colors = ["rgba(80, 196, 204, 1)", "rgba(84, 134, 204, 1)", "rgba(153, 108, 245, 1)",
            "rgba(69, 209, 134, 1)"
        ]
        let xdata = []
        let serArr = []
        if (arr.length > 0) {
            xdata = arr.map(item => {
                return dayjs(item.date).format('MM-DD')
            })
            arr[0].hisSwitchOpens.forEach((item, index) => {
                serArr.push({
                    type: "bar",
                    // barWidth: 16,
                    data: arr.map(itemmap => {
                        return itemmap.hisSwitchOpens[index].openRatio
                    }),
                    itemStyle: {
                        color: item.lineColor ? item.lineColor : colors[index]
                    }
                })
            })
        }
        let option = {
            color: colors,
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "shadow"
                },
                formatter: function (params, ticket, callback) {
                   let arr111= arr[params[0].dataIndex].hisSwitchOpens.map((item,index)=>{
                        return `<div class="tooltip-l"><span class="tooltip-pointId"><span class="tooltip-pointIdBox" style="background-color:${item.lineColor?item.lineColor:'rgba(91, 109, 128, 0.4)'}"></span>${item.pointId}</span><span style="width:140px;">开机效率${item.openRatio}%</span>
                            <span style="width:160px;">开机时间${item.openTime}</span><span style="width:140px;">开机次数${item.openCount}次</span>
                        </div>`
                    })
                    return arr111.join('\n');
                },
            },
            toolbox: {
                feature: {},
                right: 0,
                top: 50, //工具栏位置
            },
            title: [{
                text: props.attrObj && props.attrObj.chartTitle,
                textAlign: "center",
                left: "center",
                top: 10,
            }],
            grid: {
                top: 50,
                left: '3%',
                bottom: 30,
                right: 30
            },
            xAxis: [{
                name: props.attrObj && props.attrObj.chartX,
                type: "category",
                data: xdata,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(91, 109, 128, 0.8)",
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    show: true,
                    color: "rgba(62, 70, 79, 1)",
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(91, 109, 128, 0.16)",
                        type: "dashed",
                    },
                },
            }],
            yAxis: {
                name: props.attrObj && props.attrObj.chartY,
                type: "value",
                // min: 0,
                axisLabel: {
                    formatter: "{value}%",
                    color: "rgba(62, 70, 79, 1)",
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(91, 109, 128, 0.8)",
                    },
                },
                axisTick: {
                    show: false,
                },

                splitLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(91, 109, 128, 0.16)",
                        type: "dashed",
                    },
                },
            },
            series: serArr,
        };

        comChart.setOption(option, true)
    }
    watchEffect(() => {
        if (props.chartList.length > 0) {
            nextTick(() => {
                comChart = echarts.init(document.getElementById("comChart"));
                setC1(props.chartList)
            })
        } else {
            nextTick(() => {
                // comChart = echarts.init(document.getElementById("comChart"));
                // setC1([])
            })
        }
    })
    onMounted(() => {
        window.addEventListener('resize', () => {
            comChart.resize()
        })
    })
</script>
<style>
.tooltip-l{
margin: 10px;
display: flex;
align-items: center;
}
.tooltip-pointId{
    width: 150px;
    position: relative;
    padding-left: 30px;
    .tooltip-pointIdBox{
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 10px;
    }
}

</style>